<template>
  <div class="content">
    <div class="query">
      <div style=" flex: 1;">
        <el-form ref="form" :model="detaliList" label-width="80px">
          <div style="display:flex;flex-wrap:wrap;">
            <div class="data" style="flex:1;margin-left: 20px;">
              <el-form-item label="选择日期:">
                <el-date-picker
                  clearable
                  v-model="detaliList.time"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </div>
            <div style="flex:1;margin-left: 20px;">
              <el-form-item label="新闻类型:">
                <el-select clearable v-model="detaliList.atype" placeholder="请选择">
                  <el-option
                    v-for="item in newTypeoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="flex:1;margin-left: 20px;">
              <el-form-item label="新闻名称:">
                <el-input v-model="detaliList.aname"></el-input>
              </el-form-item>
            </div>
            <div style="flex:1;margin-left: 20px;">
              <el-form-item label="新闻作者:">
                <el-input v-model="detaliList.author"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
      <div class="queryButton">
        <el-button @click="query" type="primary" style="position: absolute;bottom:22px;">
         <i class="el-icon-zoom-in"></i> 
          查询
        </el-button>
      </div>
    </div>

    <div class="tablecontent">
      <el-table
        v-loading ="fullscreenLoading"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          label="新闻名称"
          prop="aname"
          min-width="300"
          align="center">
        </el-table-column>
        <el-table-column
          label="新闻类型"
          align="center"
          prop="atype"
          min-width="200">
        </el-table-column>
        <el-table-column
          label="新闻作者"
          prop="author"
          align="center"
          min-width="200">
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="addDate"
          align="center"
          min-width="200">
        </el-table-column>
        <el-table-column
          label="是否完成编辑"
          align="center"
          min-width="150">
           <template slot-scope="scope">
              {{scope.row.abianji?'已完成':'未完成'}}
            </template>
        </el-table-column>
        <el-table-column width="220" label="操作" align="center">
          <template v-if="!scope.row.abianji" slot-scope="scope">
            <el-button
              style="margin-right:10px;"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-popconfirm
              title="确认提交本条新闻到发布？"
              @confirm="handleTijiao(scope.$index, scope.row)"
            >
              <el-button
                slot="reference"
                type="primary"
                style="margin-right:10px;"
                size="mini">提交</el-button>
            </el-popconfirm>
            <el-popconfirm
              title="是否确认删除本条数据？"
              @confirm="handleDelete(scope.$index, scope.row)"
            >
              <el-button
                slot="reference"
                size="mini"
                type="danger">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top:10px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="detaliList.number"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="detaliList.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      delvisible:false,
      fullscreenLoading:false,
      total:0,
      newTypeoptions:[
        {
          value:'军事',
          lable:'军事'
        },
        {
          value:'娱乐',
          lable:'娱乐'
        },
        {
          value:'生活',
          lable:'生活'
        },
        {
          value:'国际',
          lable:'国际'
        },
        {
          value:'体育',
          lable:'体育'
        },
        {
          value:'科技',
          lable:'科技'
        }
      ],
      tableData: [],
      detaliList:{
        aname:'',
        atype:'',
        time:'',
        author:'',
        page:10,
        number:1
      }
    }
  },
  mounted(){
    this.query()
  },
  methods:{
    handleEdit(index,row){
      sessionStorage.setItem('editID',row._id)
      this.$router.push("/management/newsAdd");
    },
    //删除数据
    handleDelete(index,row){
      this.$http.post('/artcate/delet',{aid:row._id}).then(res => {
        if(res.status == 0){
          this.query()
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
        }else{
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
        this.fullscreenLoading = false
        this.$message({
            message: err,
            type: 'error'
          });
      })
    },
    //提交数据
    handleTijiao(index,row){
       this.$http.post('/artcate/update_cates',{aid:row._id,judge:true}).then(res => {
        if(res.status == 0){
          this.query()
          this.$message({
            message: '提交成功！',
            type: 'success'
          });
        }else{
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
        this.fullscreenLoading = false
        this.$message({
            message: err,
            type: 'error'
          });
      })
    },
    handleSizeChange(val){
      this.detaliList.number = 1
      this.detaliList.page = val
      this.query()
    },
    handleCurrentChange(val){
      this.detaliList.number = val
      this.query()
    },
    query(){
      this.tableData = []
      this.fullscreenLoading = true
      let date = new Date(this.detaliList.time);
      this.detaliList.addDate = ''
      if(this.detaliList.time !== null && this.detaliList.time !== ''){
        this.detaliList.addDate = date.getFullYear() + '-' + 
        ((date.getMonth() + 1)<10?'0'+(date.getMonth() + 1):(date.getMonth() + 1)) + 
        '-' + (date.getDate()<10?'0'+date.getDate():date.getDate())
      }
      let data = {}
      for(let item in this.detaliList){
        if(this.detaliList[item] !== ''){
          data[item] = this.detaliList[item]
        }
      }
      this.$http.post('/artcate/page_cate',data).then(res => {
        this.fullscreenLoading = false
        if(res.status == 0){
          this.total = res.total
          this.tableData = res.message
        }else{
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
        this.fullscreenLoading = false
        this.$message({
            message: err,
            type: 'error'
          });
      })
    }
  }
}
</script>

<style scoped>
.content {
  height: 100%;
  width: 100%;
}
.query {
  font-weight: 600;
  padding:  22px 10px 10px 10px;
  background-color: white;
  display: flex;
  flex-wrap:wrap;
  height: 100%;
}
.queryButton{
  margin-left: 20px;
  width: 100px;
  position: relative;
}
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 180px;
  height: 30px;
}
.tablecontent{
  padding: 10px;
  margin-top: 20px;
  background-color: white;
}
div /deep/ .el-table .el-table__cell {
    padding: 8px 0 !important;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
}
.query /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 200px;
}
.data /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 30px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 200px;
}
</style>